<template>
  <u-popup :show="showSelectCity" closeable round="16rpx" mode="center" @close="close" @open="open"
    :customStyle="bgStyle">
    <view class="change-city-wrapper">
      <view class="s-title">请选择您所在城市</view>
      <view class="city-item" v-for="(item, index) in cityList" @click="handleCityItem(item)" :key="index"
        :class="item.active === true ? 'select-item' : ''">
        <u-icon name="map" color="#2488F5" size="40rpx" v-if="item.active"></u-icon>
        {{item.name}}
      </view>
    </view>
  </u-popup>
</template>

<script>
  import {
    setHttpConfig
  } from '../../utils/request'
  import {
    Toast,
    getLocationInfo
  } from '../../utils/util'
  import {
    cityList
  } from '../../config'

  export default {
    props: {
      city: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        locationInfo: {},
        showSelectCity: false,
        baseImgUrl: this.$baseImgUrl,
        cityList
      }
    },
    watch: {
      city(newVal) {
        if (newVal) {
          this.setDefaultCity(this.city)
        }
      }
    },
    computed: {
      bgStyle() {
        return {
          background: `url(${this.baseImgUrl}change-city.png) no-repeat`,
          'background-size': '100%',
          'background-color': '#fff'
        }
      }
    },
    options: {
      styleIsolation: 'shared', // 解除样式隔离
    },
    methods: {
      setDefaultCity(city) {
        let cityItem = this.cityList.find((item) => item.name === city)
        if (cityItem) {
          // 其他的都重置为 false
          this.cityList.forEach((item) => {
            item.active = false
          })
          cityItem.active = true
          this.$store.commit('SET_CITY_INFO', cityItem)
          this.$emit('change')
        }
      },
      handleCityItem(item) {
        // 检测是否开通了
        if (!item.avaliable) {
          Toast('当前城市暂未开通！')
          return
        }
        // 其他的都重置为 false 
        this.cityList.forEach((item) => {
          item.active = false
        })
        item.active = true
        this.$store.commit('SET_CITY_INFO', item)
        this.showSelectCity = false
        this.$emit('change')
      },
      close() {
        this.showSelectCity = false
      },
      open() {

      },
      show() {
        this.showSelectCity = true
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .u-popup__content {
    // background: url($baseImgUrl + 'change-city.png') no-repeat;
    // background-size: 100%;
    // background-color: #FFFFFF;
  }

  .change-city-wrapper {
    padding: 53rpx 42rpx 41rpx 42rpx;
    margin: 219rpx 30rpx 50rpx 30rpx;
    width: 620rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background: #FFFFFF;

    .s-title {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      text-align: center;
      margin-bottom: 56rpx;
    }

    .city-item {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      padding: 22rpx 0;
      text-align: center;
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 3rpx 1rpx rgba(138, 138, 138, 0.16);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 1rpx solid #EBEBEB;
      margin-bottom: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .select-item {
      border: 1rpx solid #2F8EF5;
      color: #2491FC;
      background: #EDF7FF;
    }

    .confirm-button {
      width: 624rpx;
      background: #0081FF;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      margin-left: -42rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #FFFFFF;
      padding: 20rpx 0;
      text-align: center;
    }
  }
</style>